import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// 初始化主应用，其实就是渲染主应用
render({ loading: true });

// 定义 loader 函数，切换微应用时由 qiankun 框架负责调用显示一个 loading 状态
const loader = loading => render({ loading });


import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start, initGlobalState,loadMicroApp } from './qiankun';
const apps = [
  {
    name:'vueApp', //应用名
    entry:'//localhost:10000', //默认会加载这个html解析里面的js，动态的执行（子应用必须支持跨域）
    container:'#vue', //将子应用挂载到id=vue的元素上
    loader,// 微应用切换时调用的方法，显示一个 loading 状态
    activeRule:'/vue', //激活规则，访问/vue的时候挂载到id=vue的元素上
  },
  {
    name:'vueApp2', //应用名
    entry:'//localhost:30000', //默认会加载这个html解析里面的js，动态的执行（子应用必须支持跨域）
    container:'#vue2', //将子应用挂载到id=vue的元素上
    loader,// 微应用切换时调用的方法，显示一个 loading 状态
    activeRule:'/vue2', //激活规则，访问/vue的时候挂载到id=vue的元素上
  }
]
const lifeCycle = {
  beforeLoad: [
    app => {
      // 这个打印日志的方法可以学习一下，第三个参数会替换掉第一个参数中的 %c%s，并且第三个参数的颜色由第二个参数决定
      console.log('[LifeCycle] before load %c%s', 'color: green;', app.name);
    },
  ],
  beforeMount: [
    app => {
      console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
    },
  ],
  afterUnmount: [
    app => {
      console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
    },
  ],
}
// 定义全局状态，并返回两个通信方法
const { onGlobalStateChange, setGlobalState } = initGlobalState({
  user: 'qiankun',
});

// 监听全局状态的更改，当状态发生改变时执行回调函数
onGlobalStateChange((value, prev) => console.log('[onGlobalStateChange - master]:', value, prev));

// 设置新的全局状态，只能设置一级属性，微应用只能修改已存在的一级属性
setGlobalState({
  ignore: 'master',
  user: {
    name: 'master',
  },
});

// 设置默认进入的子应用，当主应用启动以后默认进入指定微应用
// setDefaultMountApp('/react16');

// debugger
registerMicroApps(apps); //注册

// 启动应用
start();

// 当第一个微应用挂载以后，执行回调函数，在这里可以做一些特殊的事情，比如开启一监控或者买点脚本
runAfterFirstMounted(() => {
  console.log('[MainApp] first app mounted');
});



Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
